<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下，你就知道</title>
    <link rel="stylesheet" href="css/index.css">
</head>
    <body>
        <div class="nav">
            <div class="nav-left">
                <ul class="nav-ul">
                    <li>新闻</li>
                    <li>hao123</li>
                    <li>地图</li>
                    <li>视频</li>
                    <li>贴吧</li>
                    <li>学术</li>
                    <li>更多</li>
                </ul>
            </div>
            <div class="nav-right">
                <ul>
                    <li class="setting">设置</li>
                        <div class="muns">
                            <div class="sanjiao"></div>
                            <p>搜索设置</p>
                            <p>高级搜索</p>
                            <p>关闭预测</p>
                            <p>隐私设置</p>
                            <p>关闭热榜</p>
                        </div>
                        <script>
                            var oBtn=document.getElementsByClassName("setting")[0];
                            var oDiv=document.getElementsByClassName("muns")[0];
                            var timer=0;
                            oBtn.onmouseover= oDiv.onmouseover=function(){
                                clearTimeout(timer);   //在消失前的那段时间里，再移入就会关闭延时计时器，就不会消失了
                                oDiv.style.display="block";
                            }
                            oBtn.onmouseout=oDiv.onmouseout=function(){
                                // 鼠标离开不立即消失，等会再消失就用延时计时器
                                timer=setTimeout(function(){
                                    oDiv.style.display="none";
                                },150);
                            }
                        </script>
                    <li class="lend">登录</li>
                </ul>
            </div>            
        </div>
        <div class="body">           
            <img class="logo" src="images/logo.png" alt="">
            <div class="search">
                <div class="search-most">
                    <input type="text" class="input">
                    <div class="camera"></div>
                </div>
                <button class="button">百度一下</button>
            </div>
            <div class="new">           
                <div class="title">
                    <p class="title1">百度热榜</p>
                    <p class="title2">换一换</p>
                </div>
                <div class="hot">
                    <div class="hot-left">
                        <div class="hot-1">
                            <p class="hot-no1">1</p>
                            <p class="hot-new">院方否认青岛新增病例是院内感染</p>
                            <p class="hot-no1-hot">热</p>
                        </div>
                        <div class="hot-2">
                            <p class="hot-no2">2</p>
                            <p class="hot-new">2020年诺贝尔经济学奖揭晓</p>
                            <p class="hot-no2-hot">新</p>
                        </div>
                        <div class="hot-3">
                            <p class="hot-no3">3</p>
                            <p class="hot-new">外交部回应防弹少年团言论</p>
                        </div>
                    </div>
                    <div class="hot-right">
                        <div class="hot-4">
                            <p class="hot-non">4</p>
                            <p class="hot-new">瑞幸咖啡被罚200万元</p>
                        </div>
                        <div class="hot-5">
                            <p class="hot-non">5</p>
                            <p class="hot-new">青岛已排查密接132人</p>
                        </div>
                        <div class="hot-6">
                            <p class="hot-non">6</p>
                            <p class="hot-new">湖人捧起总冠军奖杯致敬科比</p>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
        <div class="foot">
            <div class="foot-left">
                <ul class="foot-ul">
                    <li>设为首页</li>
                    <li>关于百度</li>
                    <li>About Baidu</li>
                    <li>百度销售</li>
                    <li>使用百度前必读</li>
                    <li>意见反馈</li>
                    <li>帮助中心</li>
                </ul>
            </div>
            <div class="foot-right">
                <ul class="foot-right">
                    <li>©2020 Baidu</li>
                    <li>(京)-经营性-2017-0020</li>
                    <li id="last">京公网安备11000002000001号</li>
                    <li>京ICP证030173号</li>
                </ul>
            </div>
        </div>
        <div class="icon"></div>
        <div class="icon-ma"></div>
    </body>
</html>